<template>
  <div class="container">
    <div class="app-container">
      <!--  default-expand-all 默认展开 -->
      <el-tree :data="treeData" default-expand-all :props="defaultProps" @node-click="handleNodeClick">
        <template #default="{ data }">
          <div class="row">
            <div class="row-left">{{ data.title }}</div>
            <div class="row-right">
              <span style="margin-right:15px;">管理员</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item>双皮奶</el-dropdown-item>
                  <el-dropdown-item>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Department',
  data() {
    return {
      treeData: [
        {
          title: '阿里',
          child: [
            {
              title: '支付宝'
            }
          ]
        },
        {
          title: '腾讯',
          child: [
            {
              title: '微信'
            },
            {
              title: 'QQ'
            },
            {
              title: '天美工作室'
            }
          ]
        },
        {
          title: '字节'
        },
        {
          title: '华为'
        },
        {
          title: '传智'
        }
      ],
      defaultProps: {
        children: 'child',
        label: 'title'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  padding: 10px 20px;
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
